<template>
  <div v-loading="loading">
    <queryHead v-if="head" :explain="explain" :result="msg" :time="time" :price="price" @query="query"/>
    <div v-if="lock" style="background-color: #f3f0f0;padding: 5px;border-radius: 5px">
      <table id="sfhy">
        <tbody>
        <tr>
          <td>
            <div class="wc">
              <img src="@/assets/images/report/mon.png">
              <p>最大逾期金额（区间）</p>
              <p class="mg">{{ getDeepData(tz, ['max_overdue_amt']) }}</p>
            </div>
          </td>
          <td>
            <div class="wc">
              <img src="@/assets/images/report/ljg.e0e33905.png">
              <p>最长逾期天数（区间）</p>
              <p class="mg">{{ getDeepData(tz, ['max_overdue_days']) }}</p>
            </div>
          </td>
          <td>
            <div class="wc">
              <img src="@/assets/images/report/rl.png">
              <p>最近逾期时间</p>
              <p class="mg">{{ getDeepData(tz, ['latest_overdue_time']) }}</p>
            </div>
          </td>
          <td>
            <div class="wc">
              <img src="@/assets/images/report/ljg.e0e33905.png">
              <p>最大履约金额</p>
              <p class="mg">{{ getDeepData(tz, ['max_performance_amt']) }}</p>
            </div>
          </td>
          <td>
            <div class="wc">
              <img src="@/assets/images/report/rl.png">
              <p>最近履约时间</p>
              <p class="mg">{{ getDeepData(tz, ['latest_performance_time']) }}</p>
            </div>
          </td>
        </tr>
        <tr>

          <td>
            <div class="wc">
              <img src="@/assets/images/report/smjg.png">
              <p>履约笔数</p>
              <p class="mg">{{ getDeepData(tz, ['count_performance']) }}</p>
            </div>
          </td>
          <td>
            <div class="wc">
              <img src="@/assets/images/report/lbs.edc3a807.png">
              <p>当前逾期机构数</p>
              <p class="mg">{{ getDeepData(tz, ['currently_overdue']) }}</p>
            </div>
          </td>
          <td>
            <div class="wc">
              <img src="@/assets/images/report/ychk.png">
              <p>当前履约机构数</p>
              <p class="mg">{{ getDeepData(tz, ['currently_performance']) }}</p>
            </div>
          </td>
          <td>
            <div class="wc">
              <img src="@/assets/images/report/lje.59b6af0b.png">
              <p>异常还款机构数</p>
              <p class="mg">{{ getDeepData(tz, ['acc_exc']) }}</p>
            </div>
          </td>
          <td>
            <div class="wc">
              <img src="@/assets/images/report/lje.59b6af0b.png">
              <p>睡眠机构数</p>
              <p class="mg">{{ getDeepData(tz, ['acc_sleep']) }}</p>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
  import queryHead from "@/views/components/queryHead.vue";
  import {queryRecord, queryData} from "@/api/system/query";
  import {getDeepData} from "@/utils/options";
  export default {
    components: {queryHead},
    name: "tza",
    props: {
      queryData: {
        required: true,
        type: Object
      },
      price: {
        default: null,
        type: Number
      },
      priceType: {
        default: null,
        type: Boolean
      },
      explain: {
        default: null,
        type: String
      },
      head: {
        default: true,
        type: Boolean
      }
    },
    data() {
      return {
        loading: false,
        lock: false,

        msg: undefined,
        time: undefined,

        tz: {
          acc_exc: "",
          acc_sleep: "",
          currently_overdue: "",
          currently_performance: "",
          latest_overdue_time: "",
          max_overdue_amt: "",
          max_overdue_days: "",
          result_code: ""
        }
      }
    },

    created() {
      this.loading = true;
      queryRecord(this.queryData).then(response => {
        this.disResponse(response)
      });
    },
    methods: {
      getDeepData,
      query() {
        this.loading = true
        queryData(this.queryData).then(response => {
          this.disResponse(response)
        });
      },
      disResponse(response) {
        if (response.info) {
          this.time = response.time
          const info = JSON.parse(response.info)
          console.log('--info--', info)
          this.msg = info.retmsg
          if (info.retcode == '000000') {
            this.tz = info.retdata
          } else {
            this.$modal.msgWarning(this.msg)
          }
          this.lock = true
        }
        this.loading = false
      }
    }
  };
</script>

<style scoped>

  #sfhy {
    margin: 10px auto;
    width: 100%;
    border-radius: 10px;
  }

  #sfhy td {
    padding: 1px;
    width: 20%;
  }

  .wc {
    background-color: #F8F8F8;
    border-radius: 10px;
    padding: 5px 10px;
  }

  .wc img {
    width: 25px;
    height: 25px;
    vertical-align: middle;
  }

  .wc p {
    display: inline-block;
    font-size: 14px;
  }

  .mg {
    float: right;
    font-weight: bold;
  }

</style>
